<template>
  <div class="shareList">
    <!-- title -->
    <van-nav-bar
      @click-left="$router.back()"
      class="skillmore_head"
      title="面经分享"
    >
      <template #left>
        <span class="iconfont">&#xe637;</span>
      </template>
    </van-nav-bar>
    <!-- 搜索框 -->
    <van-search
      class="search"
      shape="round"
      placeholder="请输入关键词"
      disabled
      @click="tosearch"
    />
    <!-- 技能列表 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <sharecom
        v-for="(item, index) in technicList"
        :key="index"
        :item="item"
      ></sharecom>
    </van-list>
  </div>
</template>

<script>
import sharecom from '../find/com/sharecom.vue'
import { articlesShare } from '@/api/api.js'

export default {
  components: { sharecom },
  data () {
    return {
      loading: false,
      finished: false,
      technicList: []
    }
  },
  methods: {
    // 搜索
    tosearch () {
      this.$router.push('/search/share')
    },
    // 上拉加载更多
    async onLoad () {
      const res = await articlesShare({ limit: 10 })
      this.technicList = [...this.technicList, ...res.data.data.list]
      this.loading = false
      if (res.data.data.list.length === 0) {
        this.finished = true
      }
    }
  }
}
</script>

<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.shareList {
  .search {
    margin: 0 10px;
  }
  .skillmore_head {
    span {
      font-size: 30px;
      color: #000;
    }
  }
  /deep/.van-nav-bar__title {
    font-size: 18px;
  }
  /deep/.van-search__content {
    padding-left: 118px;
    background-color: #f7f4f5;
  }
  /deep/.van-field__control {
    line-height: 30px;
  }
}
</style>
